<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="css/invoice.css" />
    <link rel="stylesheet" type="text/css" href="css/font.css" />
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <link rel="stylesheet" type="text/css" href="css/iziModal.css" />
    <link rel="stylesheet" href="css/footer.css">
    <title>维亚生物试剂</title>
  </head>
  <body
    class="d-flex flex-column"
    style="background-color: #ffffff; height: 100vh"
  >
    <!-- pc头部搜索，banner -->
    <iframe
      src="header.html"
      frameborder="0"
      width="100%"
      height="130px"
    ></iframe>
    <!-- 中间内容 -->
    <main class="mainContainer">
      <div class="container-fluid" style="width: 1600px">
        <!-- 发票信息弹窗 -->
        <div id="modal-custom" class="invoice_Modal">
          <button data-iziModal-close class="icon-close">
            <i class="bi bi-x-lg"></i>
          </button>
          <div class="invoice_Modal_header">
            <img src="./image/invoice.png" alt="">
            <span style="margin-left: 12px;">发票信息</span>
          </div>
          <div class="d-flex flex-row invoce_type_container">
            <div class="invoce_type_active">增值税专用发票</div>
            <div class="invoce_type">增值税普通发票</div>
          </div>
          <div class="invoce_content">
            <div class="mb-4" style="width: 100%;">
              <div class="flex-fill invoce_Input">
                <label for="inputEmail4">发票抬头</label>
                <input type="text" placeholder="输入公司名称" />
              </div>
            </div>
            <div class="mb-4" style="width: 100%;">
              <div class="flex-fill invoce_Input">
                <label for="inputEmail4">纳税人识别号</label>
                <input type="text" placeholder="输入纳税人识别号" />
              </div>
            </div>
            <div class="mb-4" style="width: 100%;">
              <div class="flex-fill invoce_Input">
                <label for="inputEmail4">注册地址</label>
                <input type="text" placeholder="输入单位注册地址" />
              </div>
            </div>
            <div class="mb-4" style="width: 100%;">
              <div class="flex-fill invoce_Input">
                <label for="inputEmail4">注册电话</label>
                <input type="text" placeholder="输入单位注册电话" />
              </div>
            </div>
            <div class="mb-4" style="width: 100%;">
              <div class="flex-fill invoce_Input">
                <label for="inputEmail4">开户银行</label>
                <input type="text" placeholder="输入开户银行" />
              </div>
            </div>
            <div class="mb-4" style="width: 100%;">
              <div class="flex-fill invoce_Input">
                <label for="inputEmail4">银行账户</label>
                <input type="text" placeholder="输入银行账户" />
              </div>
            </div>
            <div class="custom-control custom-radio d-flex">
              <input type="radio" name="setdefault" id="setdefault1" class="custom-control-input">
              <label class="custom-control-label" for="setdefault1">设为默认</label>
            </div>
          </div>
          <div class="d-flex align-items-center justify-content-center" style="margin-top: 40px;">
            <button class="invoice_Modal_comfirm submit">确认</button>
            <button class="invoice_Modal_cancel" data-iziModal-close>
              取消
            </button>
          </div>
        </div>
        
        <!-- 收货地址弹窗 -->
        <div id="modal-address" class="address_Modal">
          <button data-iziModal-close class="icon-close">
            <i class="bi bi-x-lg"></i>
          </button>
          <div class="invoice_Modal_header">
            <img src="./image/location.png" alt="">
            <span style="margin-left: 12px;">添加地址</span>
          </div>
          <div class="address_content">
            <form>
              <div class="form-group row mb-4">
                <label for="staticEmail" class="col-sm-3 col-form-label">所在地区</label>
                <div class="col-sm-9 container flex-1">
                  <div class="row">
                    <select id="province" class="form-control col" placeholder="省份">
                      <option selected>广东</option>
                      <option>北京</option>
                    </select>
                    <select id="city" class="form-control col" placeholder="城市">
                      <option>东莞</option>
                    </select>
                    <select id="area" class="form-control col" placeholder="区/县">
                      <option>长安</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="form-group row mb-4">
                <label for="staticEmail" class="col-sm-3 col-form-label">详细地址</label>
                <div class="col-sm-9 flex-1">
                  <textarea class="form-control" id="address_address" rows="3"></textarea>
                </div>
              </div>
              <div class="form-group row mb-4">
                <label for="inputPassword" class="col-sm-3 col-form-label">收货人</label>
                <div class="col-sm-9 flex-1">
                  <input type="text" class="form-control" id="address_user" value="">
                </div>
              </div>
              <div class="form-group row mb-4">
                <label for="inputPassword" class="col-sm-3 col-form-label">手机号码</label>
                <div class="col-sm-9 flex-1">
                  <input type="number" class="form-control" id="address_phone" value="">
                </div>
              </div>
              <div class="custom-control custom-radio d-flex">
                <input type="radio" name="setdefault" id="setdefault1" class="custom-control-input">
                <label class="custom-control-label" for="setdefault1">设为默认</label>
              </div>
            </form>
          </div>
          <div class="d-flex align-items-center justify-content-center" style="margin-top: 40px;">
            <button class="invoice_Modal_comfirm submit">确认</button>
            <button class="invoice_Modal_cancel" data-iziModal-close>
              取消
            </button>
          </div>
        </div>

        <div class="row">
          <div class="col-3">
            <div class="left_container">
              <div class="left_container_title">个人中心</div>
              <div class="item item_active"><div>基本信息</div></div>
              <div class="item">公司资料</div>
              <div class="item">我的订单</div>
              <div class="item">我的购物车</div>
              <div class="item">收货地址</div>
              <div class="item" class="trigger-custom">发票信息</div>
              <div class="item">我的收藏</div>
              <div class="item">绑定微信/绑定企业微信</div>
            </div>
          </div>
          <div class="col-9">
            <div class="right_container">
              <div class="basic_info_header">
                <div class="flex_row">
                  <div class="avatar">
                    <img src="./image/zhuce.png" alt="" srcset="" />
                  </div>
                  <div class="name">用户001</div>
                </div>
                <div class="exit">退出</div>
              </div>
              <!-- 基本信息 -->
              <div class="basic_info content" id="basic" style="display: block">
                <div class="title_container">基本信息</div>
                <div class="content_container">
                  <form class="form-inline">
                    <div
                      class="d-flex justify-content-between mb-5"
                      style="width: 100%"
                    >
                      <div class="form-group p-2 flex-fill">
                        <label for="inputEmail4">用户名:</label>
                        <input type="text" class="form-control" id="account" />
                      </div>
                      <div class="form-group p-2 flex-fill">
                        <label for="inputEmail4">真实姓名:</label>
                        <input type="text" class="form-control" id="name" />
                      </div>
                    </div>
                    <div
                      class="d-flex justify-content-between"
                      style="width: 100%"
                    >
                      <div class="form-group flex_row p-2 flex-fill">
                        <label for="inputEmail4">手机号:</label>
                        <div class="pl-3 pr-3">13066139221</div>
                        <div class="text-primary" style="cursor: pointer">
                          更换手机号
                        </div>
                      </div>
                      <div class="form-group flex_row p-2 flex-fill">
                        <label for="inputEmail4">电子邮箱:</label>
                        <div class="pl-3 pr-3">123456@163.com</div>
                        <div class="text-primary" style="cursor: pointer">
                          更换邮箱
                        </div>
                      </div>
                    </div>
                  </form>
                  <button type="submit" class="btn btn-primary submitBtn">
                    提交修改
                  </button>
                </div>
              </div>
              <!-- 公司资料 -->
              <div class="content" id="company" style="display: none">
                <div class="title_container">公司资料</div>
                <div class="content_container">
                  <form class="form-inline">
                    <div class="row mx-md-n5">
                      <div class="col px-md-5">
                        <div class="p-2 clearfix">
                          <div class="p-2 flex-fill companyInput">
                            <label for="inputEmail4">公司名称:</label>
                            <input type="text" id="companyname" />
                          </div>
                        </div>
                      </div>
                      <div class="col px-md-5">
                        <div class="p-2 clearfix">
                          <div class="p-2 flex-fill companyInput">
                            <label for="inputEmail4">公司税号:</label>
                            <input type="text" id="tax" />
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="row mx-md-n5">
                      <div class="col px-md-5">
                        <div class="p-2 clearfix">
                          <div class="p-2 flex-fill companyInput">
                            <label for="inputEmail4">公司地址:</label>
                            <input type="text" id="address" />
                          </div>
                        </div>
                      </div>
                      <div class="col px-md-5">
                        <div class="p-2 clearfix">
                          <div class="p-2 flex-fill companyInput">
                            <label for="inputEmail4">公司座机:</label>
                            <input type="text" id="phone" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </form>
                  <button type="submit" class="btn btn-primary submitBtn">
                    提交修改
                  </button>
                </div>
              </div>
              <!-- 我的订单 -->
              <div class="content" id="order" style="display: none">
                <div class="title_container">我的订单</div>
                <nav class="navbar navbar-expand-lg navbar-light order_nav">
                  <button
                    class="navbar-toggler"
                    type="button"
                    data-toggle="collapse"
                    data-target="#navbarTogglerDemo01"
                    aria-controls="navbarTogglerDemo01"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                  >
                    <span class="navbar-toggler-icon"></span>
                  </button>
                  <div
                    class="collapse navbar-collapse row"
                    id="navbarTogglerDemo01"
                  >
                    <!-- <a class="navbar-brand" href="#">Hidden brand</a> -->
                    <ul class="navbar-nav mr-auto mt-2 mt-lg-0 col-7">
                      <li class="nav-item">
                        <a class="nav-link order_active" href="#"
                          >全部订单(0) <span class="sr-only">(current)</span></a
                        >
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">待确认(0)</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">待付款(0)</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">待发货(0)</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">已收货(0)</a>
                      </li>
                    </ul>
                    <form
                      class="form-inline my-4 my-lg-0 search_container col-5"
                    >
                      <input
                        class="mr-sm-2"
                        type="search"
                        placeholder="(可以根据商品名称、订单号、CAS No对订单进行搜索)"
                        aria-label="Search"
                      />
                      <button class="btn btn-primary searchBtn" type="submit">
                        <i class="bi bi-search"></i>
                      </button>
                    </form>
                  </div>
                </nav>
                <ul class="list-group orderContainer mt-2">
                  <li class="list-group-item">
                    <div class="list_title">
                      <span class="order_no">订单编号 113454665623123</span>
                      <span class="order_time"
                        >下单时间 2024/07/28 12:07:22</span
                      >
                    </div>
                    <div class="list_container d-flex align-items-center">
                      <img
                        src="./image/oreder_Image.png"
                        class="rounded"
                        alt=""
                      />
                      <div class="list_container_header">
                        <h2 class="lead" style="font-weight: bold">BNP</h2>
                        <p class="lead">CAS NO:3355-53-2</p>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              <!-- 我的购物车 -->
              <div class="content" id="cart" style="display: none">
                <div class="title_container">我的购物车</div>
              </div>
              <!-- 收货地址 -->
              <div class="content" id="address" style="display: none">
                <div class="title_container flex_row">
                  <div>收货地址</div>
                  <button class="btn btn-success addAddressBtn" type="submit">
                    添加新地址
                  </button>
                </div>
                <div class="flex_row border-bottom">
                  <div class="w-25 p-3" style="color: #575757">收货人</div>
                  <div class="w-25 p-3" style="color: #575757">收货地址</div>
                  <div class="w-25 p-3" style="color: #575757">收货人联系电话</div>
                  <div class="w-25 p-3" style="color: #575757">操作</div>
                  <div class="w-25 p-3" style="color: #575757">默认地址</div>
                </div>
              </div>
              <!-- 发票信息 -->
              <div class="content" id="invoice" style="display: none">
                <div class="title_container">发票信息</div>
              </div>
              <!-- 我的收藏 -->
              <div class="content" id="collection" style="display: none">
                <div class="title_container">我的收藏</div>
                <div class="content_container">
                  <div class="scroll_content_container">
                    <div class="dataitem">
                      <img src="./image/tu.png" alt="" class="centmisn" />
                      <p class="minceme">BNP</p>
                      <p class="cas">CAS NO.198835-06-2</p>
                      <p class="xunjia">¥询价</p>
                      <div
                        class="d-flex align-items-center justify-content-center"
                      >
                        <div
                          class="imgcar d-flex align-items-center justify-content-center"
                        >
                          <i class="bi bi-cart"></i>
                        </div>
                        <div
                          class="imgcar d-flex align-items-center justify-content-center activeicon"
                        >
                          <i class="bi bi-heart"></i>
                        </div>
                      </div>
                    </div>
                    <div class="dataitem">
                      <img src="./image/tu.png" alt="" class="centmisn" />
                      <p class="minceme">BNP</p>
                      <p class="cas">CAS NO.198835-06-2</p>
                      <p class="xunjia">¥询价</p>
                      <div
                        class="d-flex align-items-center justify-content-center"
                      >
                        <div
                          class="imgcar d-flex align-items-center justify-content-center"
                        >
                          <i class="bi bi-cart"></i>
                        </div>
                        <div
                          class="imgcar d-flex align-items-center justify-content-center activeicon"
                        >
                          <i class="bi bi-heart"></i>
                        </div>
                      </div>
                    </div>
                    <div class="dataitem">
                      <img src="./image/tu.png" alt="" class="centmisn" />
                      <p class="minceme">BNP</p>
                      <p class="cas">CAS NO.198835-06-2</p>
                      <p class="xunjia">¥询价</p>
                      <div
                        class="d-flex align-items-center justify-content-center"
                      >
                        <div
                          class="imgcar d-flex align-items-center justify-content-center"
                        >
                          <i class="bi bi-cart"></i>
                        </div>
                        <div
                          class="imgcar d-flex align-items-center justify-content-center activeicon"
                        >
                          <i class="bi bi-heart"></i>
                        </div>
                      </div>
                    </div>
                    <div class="dataitem">
                      <img src="./image/tu.png" alt="" class="centmisn" />
                      <p class="minceme">BNP</p>
                      <p class="cas">CAS NO.198835-06-2</p>
                      <p class="xunjia">¥询价</p>
                      <div
                        class="d-flex align-items-center justify-content-center"
                      >
                        <div
                          class="imgcar d-flex align-items-center justify-content-center"
                        >
                          <i class="bi bi-cart"></i>
                        </div>
                        <div
                          class="imgcar d-flex align-items-center justify-content-center activeicon"
                        >
                          <i class="bi bi-heart"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 绑定微信/绑定企业微信 -->
              <div class="content" id="wechat" style="display: none">
                <div class="title_container">绑定微信/绑定企业微信</div>
                <div class="content_container">
                  <p class="h5 font-weight-normal">
                    通过扫描二维码即可通过手机微信、企业微信等获取相关信息，并及时查看订单信息。
                  </p>
                  <div class="mt-4">
                    <img
                      src="../htmlData/image/qrcode.png"
                      class="rounded mx-auto d-block qrcode"
                      alt="qrcode"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <!-- footer -->
    <footer class="d-flex justify-content-center align-items-center flex-wrap">
      <ul>
        <li class="topbig"><a href="#!">产品中心</a></li>
        <li><a href="#!">体外诊断试剂</a></li>
        <li><a href="#!"> 药研试剂</a></li>
        <li><a href="#!">定制服务</a></li>
      </ul>
      <div class="line"></div>
      <ul>
        <li class="topbig"><a href="#!">友情链接</a></li>
        <li><a href="#!">维亚生物创新中心</a></li>
        <li><a href="#!">朗华制药</a></li>
        <li><a href="#!">信实医药</a></li>
      </ul>
      <div class="line"></div>
      <ul>
        <li class="topbig"><a href="#!">关注我们</a></li>
        <div class="d-flex align-items-center sunsnediv">
          <div class="cicleine d-flex align-items-center justify-content-center">
            <img src="../htmlData/image/weixin.png" alt="" srcset="">
          </div>
          <div class="cicleine d-flex align-items-center justify-content-center">
            <img src="../htmlData/image/ins.png" alt="" srcset="">
          </div>
          <div class="cicleine d-flex align-items-center justify-content-center">
            <img src="../htmlData/image/twitter.png" alt="" srcset="">
          </div>
        </div>
       
      </ul>
      <div class="line"></div>
      <ul>
        <li class="topbig"><a href="#!">联系我们</a></li>
       
      </ul>
    </footer>
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/iziModal.min.js" type="text/javascript"></script>
    <script>
      $("#modal-custom").iziModal({
        overlayClose: false,
        width: 750,
        padding: 30,
        autoOpen: false,
        transitionIn: 'transitionIn',
	      transitionOut: 'transitionOut',
        overlayColor: "rgba(0, 0, 0, 0.4)",
        onOpened: function () {
          console.log("onOpened");
        },
        onClosed: function () {
          console.log("onClosed");
          $('#modal-custom').addClass('invoice_Modal')
        },
      });

      $("#modal-address").iziModal({
        overlayClose: false,
        width: 750,
        padding: 60,
        autoOpen: false,
        transitionIn: 'transitionIn',
	      transitionOut: 'transitionOut',
        overlayColor: "rgba(0, 0, 0, 0.4)",
        onOpened: function () {
          console.log("onOpened");
        },
        onClosed: function () {
          console.log("onClosed");
          $('#modal-address').addClass('address_Modal')
        },
      });
      

      $(".addAddressBtn").click(function(){
        $("#modal-address").iziModal("open");
      });

      const items = document.querySelectorAll(".item");
      const contents = document.querySelectorAll(".content");

      items.forEach((item, index) => {
        item.addEventListener("click", () => {
          console.log(item.innerHTML);
          const name = item.innerHTML;
          items.forEach((item) => {
            item.classList.remove("item_active");
          });
          item.classList.add("item_active");

          if (name === "发票信息") {
            $("#modal-custom").iziModal("open");
          }

          contents.forEach((content, contentIndex) => {
            if (index === contentIndex) {
              contents.forEach((content) => {
                content.style.display = "none";
              });
              content.style.display = "block";
            }
          });
        });
      });
    </script>
  </body>
</html>
